// 创建 “外壳” 组件App
import React, { Component } from "react"
// 引入组件
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
// 引入全局样式
import "./App.css"

// 创建并暴露 App 组件
export default class App extends Component {
    // 状态在哪里 操作状态的方法就在哪里
    state = {
        todos: [
            {id:1,title:"吃饭",done:true},
            {id:2,title:"睡觉",done:true},
            {id:3,title:"写代码",done:false},
        ]
    }
    // 追加一个对象
    addTodo = (todoObj) => {
        const {todos} = this.state;
        this.setState({todos:[todoObj,...todos]})
    }
    // 修改 done
    updateTodo = (id,done) => {
        const {todos} = this.state;
        const newTodo = todos.map(item => {
            if(item.id === id) return {...item, done:done}
            return item
        })
        this.setState({todos:newTodo})
    }
    // 删除一个
    removeItem = (id) => {
        const {todos} = this.state;
        let newTodos = todos.filter(item => {
            return item.id !== id;
        })
        this.setState({todos:newTodos})
    }
    // 全选
    checkAll = (bool) => {
        const {todos} = this.state;
        let newTodos = todos.map(item => {
            return {...item,done:bool}
        })
        this.setState({todos:newTodos})
    }
    // 删除已完成
    removeIsDone = () => {
        const {todos} = this.state;
        let newTodos = todos.filter(item => {
            return !item.done
        })
        this.setState({todos:newTodos})
    }
    render() {
        const {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List removeItem={this.removeItem} todos={todos} updateTodo={this.updateTodo} />
                    <Footer removeIsDone={this.removeIsDone} todos={todos} checkAll={this.checkAll} />
                </div>
            </div>
        )
    }
}